<template>
    <view class="uu-city-menu">
        <view class="uu-city-list-wrap">
            <view class="uu-indexed-group" v-for="value in cityList" :key="value.letter">
                <view class="uu-indexed-group-title" :id='"uu-indexed-group-title-index-" + value.letter'>{{
                    value.letter
                }}
                </view>
                <view class="uu-indexed-group-list">
                    <view class="uu-indexed-group-item" v-for="item in value.data" :key="item"
                        @click="emits('item-click', item)">
                        {{ item }}
                    </view>
                </view>
            </view>
        </view>
        <!-- #ifdef H5-->
        <Teleport to="body">
            <!-- #endif -->
            <view class="letter-list">
                <view class="letter-item" :class="{ active: currentLetter === value }" v-for="value in letterList"
                    :key="value" @click="handleTab(value)">
                    <text>{{ value }}</text>
                </view>
            </view>
            <!-- #ifdef H5-->
        </Teleport>
        <!-- #endif -->
        </view>
</template>
<script setup lang="ts">
import {computed, ref } from "vue";
const emits = defineEmits(['letter-click', "item-click"])
interface optionsType {
    letter: string;
    data: string[];
}
const currentLetter = ref<string>('');
const props = defineProps({
    options: {
        type: Array as () => optionsType[],
        default: () => []
    },
    showSelect: {
        type: Boolean,
        default: true
    }
})

const cityList = computed<optionsType[]>(() => {
    let list: optionsType[] = [];
    // 过滤data为空的letter
    props.options.forEach(group => {
        if (group.data && group.data.length > 0) {
            list.push(group);
        }
    });
    return list;
});

// 过滤出cityList中的letter
const letterList = computed(() => {
    return cityList.value.map(item => item.letter)
})

const handleTab = (value: string) => {
    currentLetter.value = value;
    const selectorId = `uu-indexed-group-title-index-${value}`
    // uni.pageScrollTo({
    //     selector: `#${selectorId}`,
    //     duration: 300
    // });


    emits('letter-click', selectorId)
}

</script>

<style lang="less" scoped>
.uu-city-menu {
    display: flex;
}

.uu-city-list-wrap {
    width: 650rpx;
    // background-color: red;
    display: flex;
    flex-direction: column;
    // position: relative;

    .uu-indexed-group {
        display: flex;
        flex-direction: column;
        font-size: 27rpx;


        .uu-indexed-group-title {
            font-size: 30rpx;
            height: 80rpx;
            line-height: 80rpx;
            padding-left: 10rpx;
            color: #333333;
            background-color: #b0d5e4;
            border-bottom: 1px solid #f1f1f1;
            border-top-left-radius: 20rpx;
        }

        .uu-indexed-group-list {
            padding-left: 20rpx;

            .uu-indexed-group-item {
                height: 90rpx;
                line-height: 90rpx;
                color: #191919;
                // color:#aaa;
                border-bottom: 1px solid #f1f1f1;

                &:last-child {
                    border-bottom: none
                }
            }
        }
    }
}

.letter-list {
    position: fixed;
    top: 350rpx;
    right: 25rpx;
    display: flex;
    flex-direction: column;
    gap: 5rpx;
    margin-left: 20rpx;
    z-index: 10;
    overflow: hidden;

    .letter-item {
        width: 35rpx;
        height: 35rpx;
        line-height: 30rpx;
        text-align: center;
        // background-color: red;
        font-size: 27rpx;
        color: #aaa;

        text {
            width: 100%;
            height: 100%;
            display: block;
        }

    }

    .letter-item.active {
        background-color: #007aff;
        border-radius: 45%;
        color: #fff;

    }
}
</style>